<!-- 服务区目标完成排行 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'服务区目标完成排行'"/>
        <div class="dy-table">
          <table class="pd-table pd-table-transparent">
            <thead>
            <tr>
              <th>排名</th>
              <th>服务区</th>
              <th>状态</th>
              <th>金额</th>
              <th>占比</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in tableDatas">
              <td>{{item.id}}</td>
              <td>{{item.compname}}</td>
              <td><div style="width: 40vh">
                <el-progress :percentage="item.zrate" :show-text="false" :color="'#35CB9C'" define-back-color="transparent" ></el-progress>
              </div></td>
              <td>{{item.taxsaleamnt}}</td>
              <td>{{item.zrate}}%</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
              <td colspan="6">
                <div class="pagination-page">
                  <div class="page-first" @click="toPage(0)"></div>
                  <div class="page-last" @click="toPage(tableConfit.pageNo - 2)"></div>
                  <div class="page-c">
                    <div v-for="(row,index) in pageBottomDatas" :class="{'page-c-item':true,'cur':(row + 1)===tableConfit.pageNo}" @click="toPage(row)">
                      {{ row + 1 }}
                    </div>
                  </div>
                  <div class="page-next" @click="toPage(tableConfit.pageNo)"></div>
                  <div class="page-end" @click="toPage(tableConfit.total - 1)"></div>
                </div>
              </td>
            </tr>
            </tfoot>
          </table>
        </div>
      </div>

      
      <div class="layer-bottom">
        <div class="pd_abItems-contain">
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div>
          <div class="block_select_contain">
            <el-cascader :options="fristModelOptions" :show-all-levels="false" placeholder="选择业态"
                         @change="firstModelHandleChange"></el-cascader>
          </div>
          <div class="pd-abItem-search">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";


const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])

getFwqxx();

const curServer = ref(""),curFristModel = ref("");

const serverHandleChange = (selectItem) => {
  curServer.value = selectItem
}

const areacode = ref(null)

const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })

  if(item.title === '综合'){
    areacode.value = null
  }
  else if(item.title === '东(南)'){
    areacode.value = "01"
  }
  else if(item.title === '西(北)'){
    areacode.value = "02"
  }
}

const fristModelOptions = ref([{value:'1', label:'油站'},{value:'2', label:'加气'},{value:'3', label:'充电'},{value:'4', label:'超市'},{value:'5', label:'餐厅'},{value:'6', label:'客房'},{value:'7', label:'物业'}])

const firstModelHandleChange = function (selectItem){
  debugger;
 curFristModel.value = selectItem
}

// const secondYearChange = function (selectItem){
//   console.log(selectItem);
// }


const ordercode = ref("desc")
const orderByItems = ref([{title:'正序',clazz:''},{title:'倒序',clazz:'selected'}])
const orderByItemsClick = function (item){
  orderByItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })

  if(item.title === '正序'){
    ordercode.value = "asc"
  }else if(item.title === '倒序'){
    ordercode.value = "desc"
  }
}

function formatDate(date) {
  function padZero(num) {
    return num < 10 ? '0' + num : num;
  }
  var year = date.getFullYear();
  var month = padZero(date.getMonth() + 1);
  var day = padZero(date.getDate());
  return `${year}-${month}-${day}`;
}

// 设置本月第一天日期
const now = new Date();
const today = ref([new Date(now.getFullYear(), now.getMonth(), 1),new Date()]);

const search = function (){
  console.log(today.value);
  tableConfit.value.pageNo = 1
  loadTable();
}


const tableDatas = ref([]);
const tableConfit = ref({pageNo:1,pageSize:10,total:100});
const pageBottomDatas = ref([]);

const loadTable = async function (){

    debugger;

    tableDatas.value =
      [
            {id:1,compname:'山海关服务区',zrate:'34.23',taxsaleamnt: 32123.25},
            {id:2,compname:'滦州服务区',zrate:'32.18',taxsaleamnt: 28202.31},
            {id:3,compname:'卢龙服务区',zrate:'31.56',taxsaleamnt: 23920.28},
            {id:4,compname:'北戴河服务区',zrate:'29.11',taxsaleamnt: 18230.38},
            {id:5,compname:'迁安停车区 ',zrate:'28.58',taxsaleamnt: 16220.28},
            {id:6,compname:'丰润停车区',zrate:'27.43',taxsaleamnt: 12002.20},
            {id:7,compname:'玉田服务区',zrate:'26.93',taxsaleamnt: 11820.92}
      ]

      tableDatas.value = []
      let startdate,enddate;
      //手动输入
      if(today.value[0].$d){
        startdate = formatDate(today.value[0].$d)
        enddate = formatDate(today.value[1].$d)
      }else{
        startdate = formatDate(today.value[0])
        enddate = formatDate(today.value[1])
      }

      // const params = {
      //   page: tableConfit.value.pageNo,
      //   limit: tableConfit.value.pageSize,
      //   compid: curServer.value?curServer.value[1]:null,
      //   areacode: areacode.value,
      //   // modetype:modetypecode.value,
      //   startdate: startdate,
      //   enddate: enddate,
      //   ordertype:ordercode.value
      // }
      // const res = await ajaxRequest('post', 'getFwqxsph', params);
      //  debugger;
      
        
        tableDatas.value = [
        {id:1,compname:'山海关服务区',zrate:'34.23',taxsaleamnt: 32123.25},
          {id:2,compname:'滦州服务区',zrate:'32.18',taxsaleamnt: 28202.31},
          {id:3,compname:'卢龙服务区',zrate:'31.56',taxsaleamnt: 23920.28},
          {id:4,compname:'北戴河服务区',zrate:'29.11',taxsaleamnt: 18230.38},
          {id:5,compname:'迁安停车区 ',zrate:'28.58',taxsaleamnt: 16220.28},
          {id:6,compname:'丰润停车区',zrate:'27.43',taxsaleamnt: 12002.20},
          {id:7,compname:'玉田服务区',zrate:'26.93',taxsaleamnt: 11820.92}
        ]
        //总页数
      tableConfit.value.total = calculateTotalPages(tableDatas.value.length,tableConfit.value.pageSize)
  

      

      pageBottomDatas.value = [];
      let startPage = (tableConfit.value.pageNo < 10)?0:tableConfit.value.pageNo - 5;
      let entPage = startPage + tableConfit.value.pageSize;
      console.log(startPage,entPage)
      if (entPage > tableConfit.value.total) entPage = tableConfit.value.total;
      for (let m = startPage;m < entPage;m++){
        pageBottomDatas.value.push(m);
      }
}

//计算总页数
function calculateTotalPages(totalItems, itemsPerPage) {
    return Math.ceil(totalItems / itemsPerPage);
}

const toPage = function (curPage){
  if (curPage < 0) curPage = 0
  else if (curPage > tableConfit.value.total) curPage = tableConfit.value.total
  tableConfit.value.pageNo = curPage + 1;
  loadTable();
}

/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}


loadTable();


</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:0vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 15vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 10vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}
/* .custom-progress .el-progress-bar {
    background-color: transparent;
    border-radius: 100px;
    height: 6px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
} */
::v-deep .el-progress-bar__outer {
  background-color: transparent !important;
}
</style>
